<template>
  <div class="app-container">
    <h1>虚拟滚动列表示例</h1>
    <VirtualScroller
      :list-data="productList"
      :estimated-item-size="80"
      container-height="600px"
      :buffer-scale="1.5"
      @scroll="handleScroll"
    >
      <template #default="{ item }">
        <div class="product-item" :style="{ height: item.height + 'px' }">
          <div class="product-content">
            <h3>{{ item.name }}</h3>
            <p class="price">价格: ¥{{ item.price }}</p>
            <p class="description">{{ item.description }}</p>
          </div>
        </div>
      </template>
    </VirtualScroller>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VirtualScroller from './components/VirtualScroller.vue'

// 生成商品测试数据
const productList = ref(
  Array.from({ length: 100 }, (_, i) => ({
    id: i + 1,
    name: `商品 ${i + 1}`,
    price: Math.floor(Math.random() * 1000) + 100,
    description: `这是商品 ${i + 1} 的详细描述，包含了商品的各种信息和特点。`,
    height: Math.floor(Math.random() * 40) + 80 // 80-120px的随机高度
  }))
)

// 滚动事件处理
const handleScroll = (e: { scrollTop: number }) => {
  const itemHeight = 80 // 预估的项目高度
  const containerHeight = 600 // 容器高度
  const bufferScale = 1.5 // 缓冲区比例

  // 计算大致的可视区域起始索引
  const startIndex = Math.floor(e.scrollTop / itemHeight)
  // 计算可视区域内可以显示的项目数量
  const visibleCount = Math.ceil(containerHeight / itemHeight)
  // 计算缓冲区大小
  const bufferItems = Math.floor(visibleCount * bufferScale)
  
  // 计算实际的开始和结束索引（包含缓冲区）
  const actualStartIndex = Math.max(0, startIndex - bufferItems)
  const actualEndIndex = Math.min(productList.value.length, startIndex + visibleCount + bufferItems)
  
  // 获取当前可视区域的数据
  const visibleData = productList.value.slice(actualStartIndex, actualEndIndex)
  
  console.log('当前滚动位置:', e.scrollTop)
  console.log('可视区域数据范围:', {
    起始索引: actualStartIndex,
    结束索引: actualEndIndex,
    可见项目数: visibleData.length
  })
  console.log('可视区域数据:', visibleData)
}
</script>

<style scoped>
.app-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.product-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
  background: #fff;
  transition: background-color 0.2s;
}

.product-item:hover {
  background-color: #f9f9f9;
}

.product-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 1.1em;
}

.price {
  color: #e74c3c;
  font-weight: bold;
  margin: 8px 0;
}

.description {
  color: #666;
  font-size: 0.9em;
  margin: 0;
  line-height: 1.4;
}
</style>
